<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粒子爆炸特效</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #1a202c;
            touch-action: manipulation;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100vh;
        }
        .instructions {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 16px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    <div class="instructions">点击屏幕任意位置产生粒子爆炸效果</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');
            
            // 设置canvas尺寸为窗口大小
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            
            // 粒子数组
            let particles = [];
            
            // 粒子类
            class Particle {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                    this.size = Math.random() * 5 + 2;
                    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                    this.speedX = Math.random() * 6 - 3;
                    this.speedY = Math.random() * 6 - 3;
                    this.life = 100;
                    this.decay = Math.random() * 2 + 1;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.life -= this.decay;
                    this.size *= 0.99;
                }
                
                draw() {
                    ctx.globalAlpha = this.life / 100;
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 创建粒子爆炸效果
            function createExplosion(x, y) {
                const particleCount = Math.floor(Math.random() * 50) + 50; // 50-100个粒子
                
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle(x, y));
                }
            }
            
            // 动画循环
            function animate() {
                ctx.fillStyle = 'rgba(26, 32, 44, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 更新和绘制所有粒子
                for (let i = 0; i < particles.length; i++) {
                    particles[i].update();
                    particles[i].draw();
                    
                    // 移除生命周期结束的粒子
                    if (particles[i].life <= 0) {
                        particles.splice(i, 1);
                        i--;
                    }
                }
                
                requestAnimationFrame(animate);
            }
            
            // 开始动画
            animate();
            
            // 点击事件处理
            canvas.addEventListener('click', function(e) {
                createExplosion(e.clientX, e.clientY);
            });
            
            // 触摸事件处理（移动端）
            canvas.addEventListener('touchstart', function(e) {
                e.preventDefault();
                const touch = e.touches[0];
                createExplosion(touch.clientX, touch.clientY);
            }, { passive: false });
        });
    </script>
</body>
</html>